.home-blog-content {
  @apply block items-start mx-auto mt-4 mb-16 px-4 max-w-screen-xl;
  @apply md:flex;
  .blog-list {
    @apply flex-auto;
  }
  .personal-info-wrapper {
    .personal-img {
      @apply block mt-8 mb-4 mx-auto w-24 h-24 rounded-1/2;
    }
    .name {
      @apply text-base text-center font-semibold;
    }
  }
  .info-wrapper {
    @apply sticky top-20 mb-8 p-6;
    @apply md:ml-4;
    flex: 0 0 300px;
    .module-title {
      @apply mt-4 mb-2 pt-0;
    }
    .category-wrapper {
      @apply list-none pl-0;
      .category-item {
        @apply mb-4 rounded-lg cursor-pointer border-reco-primary border border-solid;
        .category-link {
          @apply flex justify-between px-4 py-1.5;
          .text {
            @apply mr-1 text-xs leading-5 text-reco-text-lightmode;
          }
          .num {
            @apply inline-block h-5 px-2 bg-reco-primary rounded-lg text-white text-xs leading-5;
          }
        }
        &:hover {
          @apply bg-reco-primary/90;
          .category-link {
            .text {
              @apply text-white;
            }
            .num {
              @apply text-white;
            }
          }
        }
      }
    }
    .tag-wrapper {
      @apply list-none pl-0;
      .tag-item {
        @apply inline-block mr-2 mb-2 rounded-md cursor-pointer border border-solid;
        .tag-link {
          @apply flex justify-between px-2 py-1 leading-none text-xs;
        }
        &:hover {
          @apply bg-reco-primary/90 text-white;
          .tag-link {
            @apply text-white;
          }
        }
      }
    }
  }
  .pagation-container {
    @apply my-8;
  }
}

.home-blog-content
  .info-wrapper
  .category-wrapper
  .category-item
  .category-link
  .text {
  @apply dark:text-reco-text-darkmode;
}
